<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>城市选择</title>
    <style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none; }
        #continent_box_test{ overflow: hidden; text-align: center; }
        #continent_box_test li{ width: 25%; box-sizing: border-box; float: left; padding: 10px; position: relative; transition: all ease 0.15s; }
        #continent_box_test li:before{
            display: block;
            content: ' ';
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            background-color: #3498db;
            transition: all ease 0.35s;
            z-index: -1;
        }
        #continent_box_test li.current{ color: #FFFFFF; }
        #continent_box_test li.current:before{
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        #continent_box_test li.current:after{
            display: block;
            content: ' ';
            position: absolute;
            right: 3px;
            top: 3px;
            width: 5px;
            height: 5px;
            background-color: #2E0;
            border-radius: 50%;
        }
        #city_box_test{ overflow: hidden; margin: 0; }
        #city_box_test li{
            padding: 10px 10px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #f7f7f7;
            position: relative;
            transition: all ease 0.35s;
        }
        #city_box_test li:before{
            display: block;
            content: ' ';
            width: 0px;
            background: #3498db;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #FFFFFF;
            line-height: 37px;
            text-align: center;
            transition: all ease 0.35s;
        }
        #city_box_test li.letter{ border: none; background-color: #f7f7f7; }
        #city_box_test li.current{ padding-left: 47px; }
        #city_box_test li.current:before{
            content: '√';
            width: 37px;
        }
        #city_box_test li.current.start,
        #city_box_test li.current.end{
            /*background: #CCC;*/
        }
    </style>
</head>
<body>
<div>
    <div style="margin-bottom: 15px;">
        <a href="javascript:void(0);" id="btn-start-test">开始</a>&nbsp;
        <a href="javascript:void(0);" id="btn-end-test">结束</a>&nbsp;
        <a href="javascript:void(0);" id="btn-pass-test">经过</a>&nbsp;
    </div>
    <div id="result_box"></div>
    <ul id="continent_box_test"></ul>
    <ul id="city_box_test"></ul>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="cityList.js" type="text/javascript"></script>
<script type="text/javascript">
    var cityList = {"\u4e9a\u6d32":{"80":{"id":"80","area_id":"14","city_name":"\u62dc\u53bf","is_top":"0","pinyin_name":"baixian"},"74":{"id":"74","area_id":"15","city_name":"\u82ad\u63d0\u96c5","is_top":"0","pinyin_name":"batiya"},"98":{"id":"98","area_id":"12","city_name":"\u5d29\u5fc5\u70c8","is_top":"0","pinyin_name":"bengbilie"},"95":{"id":"95","area_id":"8","city_name":"\u51b2\u7ef3","is_top":"1","pinyin_name":"chongsheng"},"93":{"id":"93","area_id":"9","city_name":"\u5927\u962a","is_top":"1","pinyin_name":"daban"},"77":{"id":"77","area_id":"15","city_name":"\u5927\u6210","is_top":"0","pinyin_name":"dacheng"},"53":{"id":"53","area_id":"28","city_name":"\u6de1\u6c34","is_top":"0","pinyin_name":"danshui"},"100":{"id":"100","area_id":"12","city_name":"\u5927\u5434\u54e5","is_top":"0","pinyin_name":"dawuge"},"86":{"id":"86","area_id":"9","city_name":"\u4e1c\u4eac","is_top":"1","pinyin_name":"dongjing"},"83":{"id":"83","area_id":"10","city_name":"\u5bcc\u826f\u91ce","is_top":"0","pinyin_name":"fuliangye"},"72":{"id":"72","area_id":"16","city_name":"\u91dc\u5c71","is_top":"1","pinyin_name":"fushan"},"89":{"id":"89","area_id":"9","city_name":"\u5bcc\u58eb\u5c71","is_top":"0","pinyin_name":"fushishan"},"99":{"id":"99","area_id":"12","city_name":"\u9ad8\u5e03\u65af\u5bbe","is_top":"0","pinyin_name":"gaobusibin"},"64":{"id":"64","area_id":"28","city_name":"\u9ad8\u96c4","is_top":"1","pinyin_name":"gaoxiong"},"87":{"id":"87","area_id":"9","city_name":"\u6a2a\u6ee8","is_top":"0","pinyin_name":"hengbin"},"58":{"id":"58","area_id":"28","city_name":"\u82b1\u83b2","is_top":"1","pinyin_name":"hualian"},"78":{"id":"78","area_id":"15","city_name":"\u534e\u6b23","is_top":"0","pinyin_name":"huaxin"},"62":{"id":"62","area_id":"28","city_name":"\u5609\u4e49","is_top":"0","pinyin_name":"jiayi"},"102":{"id":"102","area_id":"11","city_name":"\u91d1\u8fb9","is_top":"1","pinyin_name":"jinbian"},"91":{"id":"91","area_id":"9","city_name":"\u4eac\u90fd","is_top":"1","pinyin_name":"jingdu"},"55":{"id":"55","area_id":"28","city_name":"\u4e5d\u4efd","is_top":"0","pinyin_name":"jiufen"},"71":{"id":"71","area_id":"17","city_name":"\u6d4e\u5dde\u5c9b","is_top":"1","pinyin_name":"jizhoudao"},"67":{"id":"67","area_id":"28","city_name":"\u57a6\u4e01","is_top":"1","pinyin_name":"kending"},"60":{"id":"60","area_id":"28","city_name":"\u9e7f\u6e2f","is_top":"0","pinyin_name":"lugang"},"73":{"id":"73","area_id":"15","city_name":"\u66fc\u8c37","is_top":"0","pinyin_name":"mangu"},"90":{"id":"90","area_id":"9","city_name":"\u540d\u53e4\u5c4b\t","is_top":"0","pinyin_name":"mingguwu"},"92":{"id":"92","area_id":"9","city_name":"\u5948\u826f","is_top":"0","pinyin_name":"nailiang"},"70":{"id":"70","area_id":"18","city_name":"\u5357\u6021\u5c9b","is_top":"0","pinyin_name":"nandao"},"61":{"id":"61","area_id":"28","city_name":"\u5357\u6295","is_top":"0","pinyin_name":"nantou"},"97":{"id":"97","area_id":"12","city_name":"\u5973\u738b\u5bab","is_top":"0","pinyin_name":"nvwanggong"},"65":{"id":"65","area_id":"28","city_name":"\u5c4f\u4e1c","is_top":"0","pinyin_name":"pingdong"},"54":{"id":"54","area_id":"28","city_name":"\u5e73\u6eaa","is_top":"0","pinyin_name":"pingxi"},"81":{"id":"81","area_id":"14","city_name":"\u6e05\u83b1","is_top":"0","pinyin_name":"qinglai"},"79":{"id":"79","area_id":"14","city_name":"\u6e05\u8fc8","is_top":"1","pinyin_name":"qingmai"},"69":{"id":"69","area_id":"18","city_name":"\u4ec1\u5ddd","is_top":"0","pinyin_name":"renchuan"},"75":{"id":"75","area_id":"15","city_name":"\u6c99\u7f8e\u5c9b","is_top":"0","pinyin_name":"shameidao"},"94":{"id":"94","area_id":"9","city_name":"\u795e\u6237","is_top":"0","pinyin_name":"shenhu"},"68":{"id":"68","area_id":"18","city_name":"\u9996\u5c14","is_top":"1","pinyin_name":"shouer"},"52":{"id":"52","area_id":"28","city_name":"\u53f0\u5317","is_top":"1","pinyin_name":"taibei"},"66":{"id":"66","area_id":"28","city_name":"\u53f0\u4e1c","is_top":"0","pinyin_name":"taidong"},"63":{"id":"63","area_id":"28","city_name":"\u53f0\u5357","is_top":"0","pinyin_name":"tainan"},"59":{"id":"59","area_id":"28","city_name":"\u53f0\u4e2d","is_top":"1","pinyin_name":"taizhong"},"88":{"id":"88","area_id":"9","city_name":"\u7bb1\u6839","is_top":"0","pinyin_name":"xianggen"},"96":{"id":"96","area_id":"12","city_name":"\u66b9\u7c92","is_top":"1","pinyin_name":"xianli"},"101":{"id":"101","area_id":"12","city_name":"\u5c0f\u5434\u54e5","is_top":"0","pinyin_name":"xiaowuge"},"85":{"id":"85","area_id":"10","city_name":"\u5c0f\u6a3d","is_top":"0","pinyin_name":"xiaozun"},"56":{"id":"56","area_id":"28","city_name":"\u65b0\u5317\u5e02","is_top":"0","pinyin_name":"xinbeishi"},"84":{"id":"84","area_id":"10","city_name":"\u65ed\u5ddd","is_top":"0","pinyin_name":"xuchuan"},"76":{"id":"76","area_id":"15","city_name":"\u591c\u529f","is_top":"0","pinyin_name":"yegong"},"57":{"id":"57","area_id":"28","city_name":"\u5b9c\u5170","is_top":"0","pinyin_name":"yilan"},"82":{"id":"82","area_id":"10","city_name":"\u672d\u5e4c","is_top":"0","pinyin_name":"zhahuang"}},"\u6b27\u6d32":{"152":{"id":"152","area_id":"25","city_name":"\u963f\u6bd4\u65af\u5e93","is_top":"0","pinyin_name":"abisiku"},"173":{"id":"173","area_id":"22","city_name":"\u963f\u5c14\u52d2","is_top":"0","pinyin_name":"aerle"},"169":{"id":"169","area_id":"22","city_name":"\u963f\u7eb3\u897f","is_top":"0","pinyin_name":"anaxi"},"149":{"id":"149","area_id":"26","city_name":"\u5965\u52d2\u677e","is_top":"0","pinyin_name":"aolesong"},"146":{"id":"146","area_id":"26","city_name":"\u5965\u65af\u9646","is_top":"1","pinyin_name":"aosilu"},"172":{"id":"172","area_id":"22","city_name":"\u963f\u7ef4\u5c3c\u7fc1","is_top":"0","pinyin_name":"aweiniweng"},"181":{"id":"181","area_id":"22","city_name":"\u5df4\u767b\u5df4\u767b","is_top":"0","pinyin_name":"badengbadeng"},"192":{"id":"192","area_id":"22","city_name":"\u67cf\u6797","is_top":"0","pinyin_name":"bailin"},"162":{"id":"162","area_id":"22","city_name":"\u5df4\u9ece","is_top":"1","pinyin_name":"bali"},"186":{"id":"186","area_id":"22","city_name":"\u73ed\u8d1d\u683c","is_top":"0","pinyin_name":"banbeige"},"202":{"id":"202","area_id":"22","city_name":"\u5df4\u585e\u5c14","is_top":"0","pinyin_name":"basaier"},"214":{"id":"214","area_id":"22","city_name":"\u5df4\u585e\u7f57\u90a3","is_top":"1","pinyin_name":"basailuona"},"148":{"id":"148","area_id":"26","city_name":"\u5351\u5c14\u6839","is_top":"0","pinyin_name":"beiergen"},"190":{"id":"190","area_id":"22","city_name":"\u8d1d\u5e0c\u7279\u65af\u52a0\u767b","is_top":"0","pinyin_name":"beixitesijiadeng"},"207":{"id":"207","area_id":"22","city_name":"\u6bd4\u8428","is_top":"0","pinyin_name":"bisa"},"170":{"id":"170","area_id":"22","city_name":"\u6ce2\u5c14\u591a","is_top":"0","pinyin_name":"boerduo"},"197":{"id":"197","area_id":"22","city_name":"\u4f2f\u5c14\u5c3c","is_top":"0","pinyin_name":"boerni"},"219":{"id":"219","area_id":"22","city_name":"\u6ce2\u5c14\u56fe","is_top":"1","pinyin_name":"boertu"},"201":{"id":"201","area_id":"22","city_name":"\u91c7\u5c14\u9a6c\u7279","is_top":"0","pinyin_name":"caiermate"},"191":{"id":"191","area_id":"22","city_name":"\u5fb7\u7d2f\u65af\u987f","is_top":"0","pinyin_name":"deleisidun"},"167":{"id":"167","area_id":"22","city_name":"\u7b2c\u620e","is_top":"0","pinyin_name":"dirong"},"178":{"id":"178","area_id":"22","city_name":"\u6cd5\u5170\u514b\u798f","is_top":"1","pinyin_name":"falankefu"},"163":{"id":"163","area_id":"22","city_name":"\u67ab\u4e39\u767d\u9732","is_top":"0","pinyin_name":"fengdanbailu"},"204":{"id":"204","area_id":"22","city_name":"\u4f5b\u7f57\u4f26\u8428","is_top":"1","pinyin_name":"foluolunsa"},"183":{"id":"183","area_id":"22","city_name":"\u5f17\u8d56\u5821","is_top":"0","pinyin_name":"fulaibao"},"189":{"id":"189","area_id":"22","city_name":"\u798f\u68ee","is_top":"0","pinyin_name":"fusen"},"175":{"id":"175","area_id":"22","city_name":"\u621b\u7eb3","is_top":"0","pinyin_name":"gana"},"160":{"id":"160","area_id":"25","city_name":"\u54e5\u672c\u54c8\u6839","is_top":"0","pinyin_name":"gebenhagen"},"158":{"id":"158","area_id":"25","city_name":"\u54e5\u5fb7\u5821","is_top":"0","pinyin_name":"gedebao"},"180":{"id":"180","area_id":"22","city_name":"\u6d77\u5fb7\u66fc","is_top":"0","pinyin_name":"haideman"},"193":{"id":"193","area_id":"22","city_name":"\u6c49\u5821","is_top":"0","pinyin_name":"hanbao"},"161":{"id":"161","area_id":"24","city_name":"\u8d6b\u5c14\u8f9b\u57fa","is_top":"1","pinyin_name":"heerxinji"},"182":{"id":"182","area_id":"22","city_name":"\u9ed1\u68ee\u6797","is_top":"0","pinyin_name":"heisenlin"},"151":{"id":"151","area_id":"25","city_name":"\u57fa\u5f8b\u7eb3","is_top":"0","pinyin_name":"jilvna"},"179":{"id":"179","area_id":"22","city_name":"\u79d1\u9686","is_top":"0","pinyin_name":"kelong"},"210":{"id":"210","area_id":"22","city_name":"\u79d1\u83ab","is_top":"0","pinyin_name":"kemo"},"168":{"id":"168","area_id":"22","city_name":"\u91cc\u6602","is_top":"0","pinyin_name":"liang"},"156":{"id":"156","area_id":"25","city_name":"\u6797\u96ea\u5e73","is_top":"0","pinyin_name":"linxueping"},"218":{"id":"218","area_id":"22","city_name":"\u91cc\u65af\u672c","is_top":"1","pinyin_name":"lisiben"},"200":{"id":"200","area_id":"22","city_name":"\u5362\u52a0\u8bfa","is_top":"0","pinyin_name":"lujianuo"},"185":{"id":"185","area_id":"22","city_name":"\u7f57\u6ed5\u5821","is_top":"0","pinyin_name":"luobao"},"205":{"id":"205","area_id":"22","city_name":"\u7f57\u9a6c","is_top":"1","pinyin_name":"luoma"},"199":{"id":"199","area_id":"22","city_name":"\u6d1b\u6851","is_top":"0","pinyin_name":"luosang"},"195":{"id":"195","area_id":"22","city_name":"\u5362\u585e\u6069","is_top":"0","pinyin_name":"lusaien"},"165":{"id":"165","area_id":"22","city_name":"\u5362\u74e6\u5c14\u6cb3\u8c37","is_top":"0","pinyin_name":"luwaerhegu"},"153":{"id":"153","area_id":"25","city_name":"\u5415\u52d2\u5965","is_top":"0","pinyin_name":"lvleao"},"215":{"id":"215","area_id":"22","city_name":"\u9a6c\u5fb7\u91cc","is_top":"1","pinyin_name":"madeli"},"159":{"id":"159","area_id":"25","city_name":"\u9a6c\u5c14\u9ed8","is_top":"0","pinyin_name":"maermo"},"174":{"id":"174","area_id":"22","city_name":"\u9a6c\u8d5b","is_top":"0","pinyin_name":"masai"},"203":{"id":"203","area_id":"22","city_name":"\u7c73\u5170","is_top":"1","pinyin_name":"milan"},"176":{"id":"176","area_id":"22","city_name":"\u6469\u7eb3\u54e5","is_top":"0","pinyin_name":"monage"},"188":{"id":"188","area_id":"22","city_name":"\u6155\u5c3c\u9ed1","is_top":"1","pinyin_name":"munihei"},"177":{"id":"177","area_id":"22","city_name":"\u5c3c\u65af","is_top":"1","pinyin_name":"nisi"},"211":{"id":"211","area_id":"22","city_name":"\u70ed\u90a3\u4e9a","is_top":"0","pinyin_name":"renaya"},"198":{"id":"198","area_id":"22","city_name":"\u65e5\u5185\u74e6","is_top":"0","pinyin_name":"rineiwa"},"212":{"id":"212","area_id":"22","city_name":"\u8428\u5c14\u65af\u5821","is_top":"0","pinyin_name":"saersibao"},"164":{"id":"164","area_id":"22","city_name":"\u5723\u7c73\u6b47\u5c14\u5c71","is_top":"0","pinyin_name":"shengmixieershan"},"155":{"id":"155","area_id":"25","city_name":"\u65af\u5fb7\u6b4c\u5c14\u6469","is_top":"1","pinyin_name":"sidegeermo"},"147":{"id":"147","area_id":"26","city_name":"\u65af\u5854\u4e07\u683c","is_top":"0","pinyin_name":"sitawange"},"171":{"id":"171","area_id":"22","city_name":"\u65af\u7279\u62c9\u65af\u5821","is_top":"0","pinyin_name":"sitelasibao"},"184":{"id":"184","area_id":"22","city_name":"\u65af\u56fe\u52a0\u7279","is_top":"0","pinyin_name":"situjiate"},"194":{"id":"194","area_id":"22","city_name":"\u82cf\u9ece\u4e16","is_top":"1","pinyin_name":"sulishi"},"150":{"id":"150","area_id":"26","city_name":"\u7279\u9686\u8d6b\u59c6","is_top":"0","pinyin_name":"telonghemu"},"166":{"id":"166","area_id":"22","city_name":"\u56fe\u5c14","is_top":"0","pinyin_name":"tuer"},"217":{"id":"217","area_id":"22","city_name":"\u6258\u83b1\u591a","is_top":"0","pinyin_name":"tuolaiduo"},"216":{"id":"216","area_id":"22","city_name":"\u74e6\u4f26\u897f\u4e9a","is_top":"0","pinyin_name":"walunxiya"},"187":{"id":"187","area_id":"22","city_name":"\u7ef4\u5c14\u8328\u5821","is_top":"0","pinyin_name":"weiercibao"},"209":{"id":"209","area_id":"22","city_name":"\u7ef4\u7f57\u7eb3","is_top":"0","pinyin_name":"weiluona"},"213":{"id":"213","area_id":"22","city_name":"\u7ef4\u4e5f\u7eb3","is_top":"0","pinyin_name":"weiyena"},"206":{"id":"206","area_id":"22","city_name":"\u4e94\u6e14\u6751","is_top":"0","pinyin_name":"wuyucun"},"208":{"id":"208","area_id":"22","city_name":"\u9521\u8036\u7eb3","is_top":"0","pinyin_name":"xiyena"},"157":{"id":"157","area_id":"25","city_name":"\u5ef6\u96ea\u5e73","is_top":"0","pinyin_name":"yanxueping"},"196":{"id":"196","area_id":"22","city_name":"\u56e0\u7279\u62c9\u80af","is_top":"0","pinyin_name":"yintelaken"},"154":{"id":"154","area_id":"25","city_name":"\u4e8e\u9ed8\u5965","is_top":"0","pinyin_name":"yumoao"}},"\u5317\u7f8e\u6d32":{"143":{"id":"143","area_id":"38","city_name":"\u5965\u5170\u591a","is_top":"1","pinyin_name":"aolanduo"},"140":{"id":"140","area_id":"37","city_name":"\u6ce2\u58eb\u987f","is_top":"0","pinyin_name":"boshidun"},"142":{"id":"142","area_id":"37","city_name":"\u5e03\u6cd5\u7f57","is_top":"0","pinyin_name":"bufaluo"},"138":{"id":"138","area_id":"37","city_name":"\u8d39\u57ce","is_top":"0","pinyin_name":"feicheng"},"132":{"id":"132","area_id":"36","city_name":"\u9ec4\u77f3\u56fd\u5bb6\u516c\u56ed","is_top":"0","pinyin_name":"huangshiguojiagongyuan"},"137":{"id":"137","area_id":"37","city_name":"\u534e\u76db\u987f","is_top":"1","pinyin_name":"huashengdun"},"131":{"id":"131","area_id":"36","city_name":"\u65e7\u91d1\u5c71","is_top":"1","pinyin_name":"jiujinshan"},"130":{"id":"130","area_id":"36","city_name":"\u62c9\u65af\u7ef4\u52a0\u65af","is_top":"0","pinyin_name":"lasiweijiasi"},"127":{"id":"127","area_id":"39","city_name":"\u6d1b\u6749\u77f6","is_top":"0","pinyin_name":"luoshan"},"128":{"id":"128","area_id":"36","city_name":"\u6d1b\u6749\u77f6","is_top":"1","pinyin_name":"luoshan"},"144":{"id":"144","area_id":"38","city_name":"\u8fc8\u963f\u5bc6","is_top":"0","pinyin_name":"maiami"},"139":{"id":"139","area_id":"37","city_name":"\u7ebd\u7ea6","is_top":"1","pinyin_name":"niuyue"},"141":{"id":"141","area_id":"37","city_name":"\u5c3c\u4e9a\u52a0\u62c9","is_top":"0","pinyin_name":"niyajiala"},"129":{"id":"129","area_id":"36","city_name":"\u5723\u5730\u4e9a\u54e5","is_top":"0","pinyin_name":"shengdiyage"},"145":{"id":"145","area_id":"38","city_name":"\u5766\u5e15","is_top":"0","pinyin_name":"tanpa"},"134":{"id":"134","area_id":"36","city_name":"\u897f\u96c5\u56fe","is_top":"1","pinyin_name":"xiyatu"},"133":{"id":"133","area_id":"36","city_name":"\u76d0\u6e56\u57ce","is_top":"0","pinyin_name":"yanhucheng"},"135":{"id":"135","area_id":"36","city_name":"\u4f18\u80dc\u7f8e\u5730","is_top":"0","pinyin_name":"youshengmeidi"},"136":{"id":"136","area_id":"37","city_name":"\u829d\u52a0\u54e5","is_top":"1","pinyin_name":"zhijiage"}},"\u6fb3\u6d32":{"220":{"id":"220","area_id":"42","city_name":"\u5e03\u91cc\u65af\u73ed","is_top":"1","pinyin_name":"bulisiban"}}};
    var cl = new CityList(cityList);
    cl.init();
</script>
</body>
</html>